<template>
	<view style="padding: 20upx 0upx 170upx 0upx;">
		
		<view class="baidiView">
			<view class="" style="display: flex;align-items: center;justify-content: space-between;">
				<view class="" style="display: flex;align-items: center;">
					
					<view class=""  style="display: flex;align-items: center;">
						
					
						<view class="section_5">
							
						</view>
						<view class="titleV">
							户型名称:
						</view>
					</view>
					<view class="" style="margin-left: 20upx;max-width: 330upx;">
						<input type="" class="kehuInput" placeholder="请输入户型名称" :value="morenhuxingData.houseName" placeholder-style="font-size: 26upx" @blur="huxingBlur"/>
					</view>
					
					
					
					
				</view>
				<view class="text-wrapper_2" @click="navprogramme">
					导入户型
				</view>
			</view>
			
			
			
		</view>
		
		<view class="baidiView" style="display: flex;align-items: flex-start;">
			<view class="" style="display: flex;align-items: center;">
				<view class="section_5">
					
				</view>
				<view class="titleV">
					户型配置：
				</view>
				
			</view>
			
			<view class="">
				<img :src="morenhuxingData.imgUrl" alt="" style="width: 400upx" v-model="widthFix"/>
			</view>
		</view>
		
		<view class="baidiView">
			<view class="" style="display: flex;align-items: center;justify-content: space-between;">
				<view class="" style="display: flex;align-items: center;">
					<view class="section_5">
						
					</view>
					<view class="titleV">
						客户信息
					</view>
				</view>
				
				<view class="text-wrapper_2" @click="navaddress">
					选择客户
				</view>
			</view>
			<view class="" style="margin-left: 10upx;">
				
				<view class="kehuView" style="display: flex;padding: 10upx;">
					<view class="kehuxx">
						客户名称：
						
					</view>
					<input type="" class="kehuInput" placeholder="请输入用户名称" :value="addressData.nickName" placeholder-style="font-size: 26upx" @blur="yonghuBlur"/>
				</view>
				
				<view class="kehuView">
					<view type="number" class="kehuxx"  >
						联系电话：
						
					</view>
					<input type="" class="kehuInput" @blur="phoneBlur" placeholder="请输入联系电话" :value="addressData.phone" placeholder-style="font-size: 26upx"/>
				</view>
				
				<view class="kehuView" style="display: flex;padding: 10upx;">
					<view class="kehuxx">
						客户地址：
						
					</view>
					<input type="" class="kehuInput" @blur="dizhiBlur" placeholder="请输入联系电话" :value="addressData.area&&addressData.detail?addressData.province+addressData.city+addressData.area+addressData.detail:(addressData.detail?addressData.detail:'')" placeholder-style="font-size: 26upx"/>
					<!-- <view type="" class="kehuInput" placeholder="请输入客户地址" placeholder-style="font-size: 26upx">
						{{addressData.area&&addressData.detail?addressData.province+addressData.city+addressData.area+addressData.detail+addressData.province+addressData.city+addressData.area+addressData.detail:''}}
					</view> -->
				</view>
				
			</view>
			 
		</view>
		
		<view class="baidiView" >
			<view class="" style="display: flex;align-items: center;">
				<view class="section_5">
					
				</view>
				<view class="titleV">
					房间管理
					</view>
			</view>
			<view class="" style="padding 20upx 0;">
				<view v-for="(item,index) in morenhuxingData.rooms ||morenhuxingData.roomEntityList">
					<view class="fangjianV" v-if="!item.isDel">
						<view class="" style="display: flex;align-items: center;">
							<uni-icons type="bars" size="24" style="margin-top: 5upx;"></uni-icons>
							<view class="">
								{{item.roomName}}
							</view>
						</view>
						<view class="" style="width: 300upx;display: flex;align-items: center;justify-content: space-between;">
							<view class="" style="display: flex;align-items: center;">
								<view class="">
									选择位置
								</view>
								<uni-icons type="down" size="14" color="#0B72F4"></uni-icons>
							</view>
							
							<uni-icons type="minus" size="30" color="red" @click="shanchu(index)"></uni-icons>
						</view>
					</view>
				</view>
				
				
				<view class="fangjianV" style="font-weight: bold;background-color: white;">
					<view class="" style="display: flex;align-items: center;" @click="inputDialogToggle">
						<view class="jiaV" style="">
							+
						</view>
						<view class="" style="font-size: 34upx;">
							增加房间
						</view>
						
					</view>
					
				</view>
			</view>
			
		</view>
		
		
		
		
		
		
		<view class="diView">
			<view class="text-wrapper_2" style="padding: 10upx 50upx;font-size: 36upx;">
				取消
			</view>
			<view class="text-wrapper_2" @click="navquick" style="padding: 10upx 50upx;font-size: 36upx;">
				确认
			</view>
			
		</view>
		
		<uni-popup ref="inputDialog" type="dialog">
			<uni-popup-dialog ref="inputClose"  mode="input" title="增加房间" 
				placeholder="请输入房间名称" @confirm="dialogInputConfirm"></uni-popup-dialog>
		</uni-popup>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				morenhuxingData:"",
				newRoomName:"",
				addressData:{nickName:"",phone:"",detail:""},
			}
		},
		onLoad(optiosn) {
			this.morenhuxingData=optiosn?JSON.parse(optiosn.morenhuxingData):""
			
			var fuwutongji=JSON.parse(optiosn.fuwutongji)
			console.log(fuwutongji)
			this.addressData.nickName=fuwutongji.nickName
			this.addressData.phone=fuwutongji.phone
			this.addressData.detail=fuwutongji.dizhi
		},
		onShow() {
			// console.log(this.morenhuxingData.rooms)
			// this.$forceUpdate() //强制渲染
		},
		methods: {
			huxingBlur(e){
				console.log(e.detail.value)
				this.morenhuxingData.houseName=e.detail.value
			},
			yonghuBlur(e){
				console.log(e.detail.value)
				this.addressData.nickName=e.detail.value
			},
			phoneBlur(e){
				console.log(e.detail.value)
				this.addressData.phone=e.detail.value
			},
			dizhiBlur(e){
				console.log(e.detail.value)
				this.addressData.detail=e.detail.value
			},
			shanchu(index){
				var that=this
				uni.showModal({
					content: '确定要删除此房间吗？',
					success: function (res) {
						if (res.confirm) {
							that.morenhuxingData.rooms[index].isDel=1
							that.$forceUpdate() //强制渲染
						} else if (res.cancel) {
									console.log('用户点击取消');
						}
					}
				});
		},
			//增加一个房间
			addroom(){
				
				var newRoom={
					  tid: this.morenhuxingData.rooms.length,
					  roomName: this.newRoomName,
					  productCount: 0,
					  productTypeNum: 0,
					  isDel: 0,
					  roomProductEntityList: [],
					  roomLocation: "",
					  roomProductList: [],
				}
				this.morenhuxingData.rooms[this.morenhuxingData.rooms.length]=newRoom
				this.$forceUpdate() //强制渲染
			},
			
			//弹出增加房间
			inputDialogToggle() {
				this.$refs.inputDialog.open()
			},
			dialogInputConfirm(val) {
					// console.log(val)
					this.newRoomName=val
					this.addroom()
					// 关闭窗口后，恢复默认内容
					this.$refs.inputDialog.close()
			},
			
			navquick(){
				const pages = getCurrentPages()//获取所有实例
				const previousPageS = pages[pages.length-2]//当前页面的上一个页面
				previousPageS.$vm.aa = 1//直接修改上个页面数据
				previousPageS.$vm.programmeData.roomEntityList=this.morenhuxingData.rooms
				previousPageS.$vm.fuwutongji.nickName=this.addressData.nickName
				previousPageS.$vm.fuwutongji.phone=this.addressData.phone
				previousPageS.$vm.fuwutongji.dizhi=this.addressData.area?this.addressData.province+this.addressData.city+this.addressData.area+this.addressData.detail:this.addressData.detail
				previousPageS.$vm.addressData=this.addressData
				uni.navigateBack({
					delta: 1
				})
			},
			navprogramme(){
				uni.navigateTo({
					url:"/pages/packageOrder/programme/index"
				})
			},
			navaddress(){
				uni.navigateTo({
					url:"/pages/packageUserCenter/address/index"
				})
			}
			
		}
	}
</script>

<style>
	 page { 
		 background-color: rgb(238, 238, 238); 
	}
	.baidiView{
		border-radius: 10upx;
		background-color: white;
		width: 670upx;
		padding: 20upx;
		margin-left: 20upx;
		margin-top: 24upx;
	}
	.diView{
		position: fixed;
		bottom: 0;
		width: 650upx;
		padding: 0upx 50upx;
		height: 150upx;
		background-color: white;
		display: flex;
		align-items: center;
		justify-content: space-between;
		
		
	}
	.section_5{
	  background-image: linear-gradient(0deg, #106bf3 0%, #00c0fa 100%);
	  border-radius: 1.5upx;
	  width: 7upx;
	  height: 16px;
	  margin-right: 5px;
	}
	.titleV{
		font-weight: bold;
		font-size: 34upx;
	}
	.kehuxx{
		font-size: 32upx;
		color:#585757;
		
	}
	.kehuView{
		display: flex;padding: 10upx;
		align-items: center;
		font-size: 30upx;
	}
	.kehuInput{
		width: 350upx;
		min-height: 40upx;
		background-color: rgb(242, 242, 242);
		font-size: 30upx;
	}
	.fangjianV{
		width: 630upx;
		background-color: rgb(245, 245, 245);
		padding: 10upx 20upx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-top: 20upx;
		border-radius: 10upx;
	}
	.jiaV{
		width: 44upx;
		height:34upx;
		background-color: rgb(47, 47, 47);
		color: white;
		font-size: 50upx;
		font-weight: bold;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 100upx;
		padding-bottom: 10upx;
		margin-right: 30upx;
		/* line-height: 50upx; */
	}
</style>
